// **************************************************
//
// MUELLER
// modular grid system
//
// _media-handheld.scss
//
// <479px: fluid grid
//
// **************************************************

@import "compass/layout/grid-background";
@import "compass/typography/vertical_rhythm";

@media screen and (max-width: 479px) {

    // baseline
    $relative-font-sizing: false;
    $base-font-size: 16px;
    $base-line-height: 24px;
    @include establish-baseline(12px);

    $gc: 6; // grid columns
    $gw: 12.5%; // grid width
    $gm: 5%; // grid margin
  
    .g-h-c {
        @include container;
        width: $gw*$gc+$gm*($gc - 1); // 300px
        // uncomment for a background-grid
        // @include grid-background($gc, $gw, $gm, 18px, 0, #ccc, #ddd, #999, false);
    }
    
    @include grids(h,
        0 1 2 3 4 6, // only add the columns you really need
        $gc,
        $gw,
        $gm,
        0 1 2 4); // only add the pad-units you really need to push/pull/append/prepend

    // visibility
    .l-show, .d-show, .h-show, .hp-show, .hl-show, .t-show, .tp-show, .tl-show {
        display: none !important;
    }
    .h-hide {
        display: none !important;
    }
    .h-show {
        display: block !important;
    }
    #{elements-of-type(inline)} {
        &.h-show {
            display: inline !important;
        }
    }

    body {
        padding: 3em 20px !important;
    }

}